<template>
    <!-- 112 -->
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-row>
                <el-form-item label="工号" prop="jobNumber">
                    <el-input v-model="queryParams.jobNumber" clearable @keyup.enter.native="handleQuery"
                        style="width: 100px" />
                </el-form-item>
                <el-form-item label="姓名" prop="fullName">
                    <el-input v-model="queryParams.fullName" clearable @keyup.enter.native="handleQuery"
                        style="width: 100px" />
                </el-form-item>
                <el-form-item label="部门" prop="department">
                    <treeselect ref="tree" :options="deptOptions" :show-count="true" style="width: 260px"
                        placeholder="请选择归属部门" @input="treeSelectInput" @select="treeSelectChange" />
                </el-form-item>
                <el-form-item label="岗位" prop="position">
                    <el-input v-model="queryParams.position" clearable @keyup.enter.native="handleQuery"
                        style="width: 100px" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
                </el-form-item>
            </el-row>
        </el-form>

        <el-table v-loading="loading" :data="employeeList" border>

            <el-table-column label="工号" align="center" prop="jobNumber" />
            <el-table-column label="姓名" align="center" prop="fullName" />
            <el-table-column label="身份证" align="center" prop="idNumber" />
            <el-table-column label="年龄" align="center" prop="age" />
            <el-table-column label="性别" align="center" prop="gender" />
            <el-table-column label="部门" align="center" prop="department" />
            <el-table-column label="岗位" align="center" prop="position" />

            <el-table-column label="是否外包" align="center" prop="outsource" />
        </el-table>


    </div>
</template>
  
<script>
import {
    retirementReminder
} from "@/api/business/employee";
import { getUser, deptTreeSelect } from "@/api/system/user";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    name: "RetirementReminder",
    components: { Treeselect },
    data() {
        return {

            // 遮罩层
            loading: true,

            // 员工表格数据
            employeeList: [],
            queryParams: {
                jobNumber: undefined,
                fullName: undefined,
                department: undefined,
                position: undefined,
            },
            // 部门树选项
            deptOptions: undefined,

        };
    },
    created() {
        this.getList();

    },
    methods: {

        /** 查询员工列表 */
        getList() {
            this.loading = true;
            retirementReminder(this.queryParams).then((response) => {
                this.employeeList = response;
                this.loading = false;
            });
        },
        formatDate(dateString) {
            if (dateString) {
                const options = { year: 'numeric', month: 'short', day: 'numeric' };
                return new Date(dateString).toLocaleDateString(undefined, options);
            } else {
                return '';
            }
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                "business/employee/retirementReminderExport",
                {
                    ...this.queryParams,
                },
                `employee_${new Date().getTime()}.xlsx`
            );
        },
        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                this.deptOptions = response.data;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList();
        },
        // 选中触发（第一次回显的时候会触发，清除值的时候会触发, value值为undefined） input事件用于v-model双向绑定组件更新父组件值
        treeSelectInput(value, instanceId) {
            //console.log(value, 'input事件')
            if (value === undefined) {
                this.queryParams.department = null;
            }
            //console.log(this.value, 'this.value -- input') // 这个不需要 延迟
        },
        // 选中触发（清除值的时候不会触发）
        treeSelectChange(raw, instanceId) {
            //console.log(raw, '当前的对象')
            setTimeout(() => { // 如果用到this.value 需要setTimeout延迟一下拿到最新的值
                // console.log(raw.label, 'this.value -- select')
                this.queryParams.department = raw.label;
            })
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.queryParams = {
                jobNumber: undefined,
                fullName: undefined,
                department: undefined,
                position: undefined,
            };
            this.handleQuery();
        },

    },
};
</script>
  
<style scoped>
.el-cascader-panel {
    height: 60vh;

    .el-scrollbar__wrap {
        height: 100%;
    }
}

.base-info-box {
    overflow: hidden;
}
</style>